//职员管理

import React, {Component} from 'react';
import app from '../app';
import {Form, Input, Button, Table, Modal, Row, Upload, Icon} from 'antd';
import {project, rotation} from '../value';
import '../css/other.css';
import {config} from "../config";
import {AddAdverts, EditAdverts} from '../components/operateManage';


const FormItem = Form.Item;
const confirm = Modal.confirm;

class CarouselList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            searchData: {},
            pagination: {current: 1, pageSize: 10, total: 0},
            data: [],
            currentPageSize: 0,
            pageCount: 0,
            imgUrl: '',
        }
    }

    columns = [
        {
            title: '序号',
            dataIndex: 'order_number'
        },
        {
            title: '标题',
            dataIndex: 'rotation_name'
        },
        {
            title: '图片',
            dataIndex: this.columns,
            render: data => {
                return (
                    <img className={"projectImg"} src={config.imgServerUrl + data.file_path}/>
                )
            }
        },
        {
            title: '跳转页面',
            dataIndex: 'rotation_type',
            render: rotation_type => {
                let text = '';
                switch (rotation_type) {
                    case '1':
                        text = '商品页面';
                        break;
                    case '2':
                        text = '推广预约';
                        break;
                    case '3':
                        text = '充值';
                        break;
                    case '4':
                        text = '会员卡';
                        break;
                    case '5':
                        text = '意见反馈';
                        break;
                    default:
                        break;
                }
                return (
                    <span>{text}</span>
                )
            }
        },
        {
            title: '说明',
            dataIndex: 'rotation_explain'
        },
        {
            title: '排序',
            dataIndex: 'rotation_sort'
        },
        {
            title: '状态',
            dataIndex: 'rotation_isable',
            render: admin_status => {
                let text = '';
                if (admin_status === '1') {
                    text = '启用';
                } else if (admin_status === '0') {
                    text = '停用';
                }
                return (
                    <span>{text}</span>
                )
            }
        },
        {
            title: '操作',
            dataIndex: this.columns,
            render: data => {
                return (
                    <div>
                        <EditAdverts data={data}
                                     refresh={() => this.handleRefreshAfterUpdate()}></EditAdverts>
                        {
                            data.rotation_isable === '1' ? <Button style={{marginLeft: '10px'}} type="danger"
                                                                   onClick={() => this.handleUpdateRotation(data.rotation_id, 0)}>停用</Button> :
                                <Button style={{marginLeft: '10px'}} type="primary"
                                        onClick={() => this.handleUpdateRotation(data.rotation_id, 1)}>启用</Button>
                        }
                        <Button style={{marginLeft: '10px'}} type="danger"
                                onClick={() => this.handleUpdateRotation(data.rotation_id, 2)}>删除</Button>
                    </div>
                )
            }
        },
    ];

    render() {
        return (
            <div style={{paddingBottom: 25}}>
                <div className="pageTitle">
                    首页轮播图广告
                </div>
                <AddAdverts refresh={() => this.handleRefreshAfterCreate()}></AddAdverts>
                <Row style={{marginTop: '20px'}}>
                    <Table
                        columns={this.columns}
                        rowKey={(record, index) => index}
                        dataSource={this.state.data}
                        loading={this.state.loading}
                        pagination={this.state.pagination}
                        onChange={this.handleTableChange}
                    />
                </Row>
            </div>
        )
    }

    /**
     * 初始化
     */
    componentDidMount() {
        const array = [1, 2, 3, 4, 5, 6];
        array.push(7);
        console.log(array);
        const param = {page: 1, size: 10};
        this.searchRotationList(param);
    }

    /**
     * 获取搜索条件
     */
    handleGetValue(value) {
        const searchData = {project_name: value};
        this.setState({searchData});
        const param = {
            ...searchData
        };
        this.searchProject(param);
    }

    /**
     * 处理创建后刷新事件
     */
    handleRefreshAfterCreate() {
        const param = {page: 1, size: 10};
        this.searchRotationList(param);
    }

    /**
     * 处理删除后刷新事件
     */
    handleRefreshAfterDelete() {
        const param = {page: 1, size: 10};
        this.searchRotationList(param);
    }

    /**
     * 处理更新后刷新事件
     */
    handleRefreshAfterUpdate() {
        const {pagination} = this.state;
        const param = {
            page: pagination.current,
            size: pagination.pageSize
        };
        this.searchRotationList(param);
    }

    /**
     * 处理页码、显示数量变化事件
     * @param pagination
     * @param filters
     * @param sorter
     */
    handleTableChange = (pagination, filters, sorter) => {
        const current = pagination.current;
        const size = pagination.pageSize;
        this.searchRotationList({page: current, size});
    };

    /**
     * 查找首页轮播图列表
     * @param param
     */
    searchRotationList(param) {
        let _this = this;
        _this.setState({loading: true});
        app.post(rotation.SEARCH_ROTATION_LIST, param).then(result => {
            if (result.code === 1) {
                const data = result.data;
                for (let i = 0; i < data.length; i++) {
                    data[i].order_number = i + 1;
                }
                const pagination = {total: result.count, current: 1, pageSize: 10};
                this.setState({pagination, data: data, loading: false});
            } else {
                app.alert(result.msg, 'success', 1);
                const pagination = {total: 0, current: 0, pageSize: 0};
                this.setState({pagination, data: [], loading: false});
            }
        });
    }

    /**
     * 更新广告状态
     * @param id
     * @param type
     */
    handleUpdateRotation(id, type) {
        let _this = this;
        if (type === 2) {
            confirm({
                content: '您确定要删除该广告吗？',
                onOk() {
                    app.post(rotation.UPDATE_ROTATION_ISABLE, {rotation_id: id, rotation_isable: '2'}).then((req) => {
                        if (req.code === 1) {
                            app.alert("删除成功", 'success', 1);
                            _this.handleRefreshAfterDelete();
                        } else {
                            app.alert(req.msg, 'error', 1);
                        }
                    })
                },
                onCancel() {
                },
            });
        } else if (type === 0) {
            confirm({
                content: '您确定要停用该广告吗？',
                onOk() {
                    app.post(rotation.UPDATE_ROTATION_ISABLE, {rotation_id: id, rotation_isable: '0'}).then((req) => {
                        if (req.code === 1) {
                            app.alert("停用成功", 'success', 1);
                            _this.handleRefreshAfterUpdate();
                        } else {
                            app.alert(req.msg, 'error', 1);
                        }
                    })
                },
                onCancel() {
                },
            });
        } else if (type === 1) {
            app.post(rotation.UPDATE_ROTATION_ISABLE, {rotation_id: id, rotation_isable: '1'}).then((req) => {
                if (req.code === 1) {
                    app.alert("启用成功", 'success', 1);
                    _this.handleRefreshAfterUpdate();
                } else {
                    app.alert(req.msg, 'error', 1);
                }
            })
        }
    }
}


const CarouselLists = Form.create()(CarouselList);

export default CarouselLists


